<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <!-- 属性 -->
    <!-- https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#%E5%B1%9E%E6%80%A7 -->

    <!-- value -->
    <!-- value	所有	表单控件的值。以名字/值对的形式随表单一起提交 -->
    <!-- name -->
    <!-- name	所有	input表单控件的名字。以名字/值对的形式随表单一起提交 -->
    <!-- id -->
    <p>input value</p>
    <form action="">
        username: <input type="text" name="username" value="zhangsan"> <br>
        password: <input type="text" name="password" value="lisi"> <br>
        gender: <input type="radio" name="gender" value="male" checked> male
        <input type="radio" name="gender" value="female"> female <br>
        courses: <input type="checkbox" name="courses" id="" value="Java"> Java
        <input type="checkbox" name="courses" id="" value="HTML5" checked> HTML5
        <input type="checkbox" name="courses" id="" value="Spring" checked> Spring <br>
        <input type="image" src="./send-submit.png" alt="提交" value="提交2" width="50" height="30">
        <input type="button" value="提交">
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>

    <hr>

    <!-- autocomplte -->
    <!-- autocomplete	所有	用于表单的自动填充功能 -->
    <p>autocomplte</p>
    <form action="">
        username: <input type="text" name="username" autocomplete="on"> <br>
        address: <input type="text" name="address" autocomplete="off"> <br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>

    <hr>

    <!-- autofocus -->
    <!-- autofocus	所有	页面加载时自动聚焦到此表单控件 -->
    <p>autofocus</p>
    <form action="">
        username: <input type="text" name="username"> <br>
        address: <input type="text" name="address" autofocus> <br>
        <input type="reset" value="重置">
        <input type="submit" value="提交">
    </form>



    <hr>

    <!-- required -->
    <!-- required (en-US)	绝大部分	布尔值。表示此值为必填项或者提交表单前必须先检查该值 -->
    <p>required</p>
    <form action="">
        username: <input type="text" name="username" required> <br>
        password: <input type="password" name="password" required> <br>
        <input type="reset" value="重置">
        <input type="submit" value="注册">
    </form>

    <hr>

    <!-- pattern -->
    <!-- pattern	password, text, tel	匹配有效 value 的模式（pattern） -->
    <!-- 正则表达式在线测试 -->
    <!-- https://c.runoob.com/front-end/854/ -->
    <p>autocomplte</p>
    <form action="">
        username: <input type="text" name="username" pattern="\w{4,}"> 至少4个字符 <br>
        password: <input type="password" name="password"
            pattern="^(?=.*[A-Z]+.*)(?=.*[a-z]+.*)(?=.*\d+.*)(?=.*[!@#$%^&*-+/.]+.*).{8,12}$">
        至少8个字符，至少包含1个字母，至少包含1个数字，至少包含1个特殊字符 <br>
        <input type="reset" value="重置">
        <input type="submit" value="注册">
    </form>

    <hr>
    <!-- placeholder -->
    <!-- placeholder	password, search, tel, text, url	当表单控件为空时，控件中显示的内容 -->
    <p>placeholder</p>
    <form action="">
        username: <input type="text" name="username" placeholder="请输入用户名"> <br>
        password: <input type="password" name="password" placeholder="请输入密码"> <br>
        phone: <input type="tel" name="phone" placeholder="请输入电话号码"> <br>
        email: <input type="email" name="email" placeholder="请输入电子邮箱"> <br>
        age: <input type="number" name="age" min="18" max="60" placeholder="请输入年龄"> <br>
        <input type="reset" value="重置">
        <input type="submit" value="注册">
    </form>





</body>

</html>